<template>
  <el-drawer
    title="我是标题"
    :with-header="false"
    :visible.sync="drawerVisible"
    size="280px"
    direction="rtl">
    <el-card shadow="never" style="box-shadow: none !important;">
      <div slot="header" class="clearfix">
        <b>系统布局设置</b>
      </div>
      <div>
        <ul class="system-setting">
          <li class="flexSpeen">
            <span>主题颜色</span>
            <span><theme-picker></theme-picker></span>
          </li>
          <li class="flexSpeen">
            <span>显示标签</span>
            <span><el-switch v-model="drawerTabsVisible"></el-switch></span>
          </li>
          <li class="flexSpeen">
            <span>显示LOGO</span>
            <span><el-switch v-model="drawerLogoVisible"></el-switch></span>
          </li>
        </ul>
      </div>
    </el-card>
  </el-drawer>
</template>

<script>
import ThemePicker from '@/components/ThemePicker.vue'
export default {
  components: {
    ThemePicker
  },
  computed: {
    drawerVisible: {
      get() {
        return this.$store.state.drawer.drawerVisible
      },
      set(value) {
        this.$store.dispatch('changeSetting', {
          key: 'drawerVisible',
          value
        })
      }
    },
    drawerTabsVisible: {
      get() {
        return this.$store.state.drawer.drawerTabsVisible
      },
      set(value) {
        this.$store.dispatch('changeSetting', {
          key: 'drawerTabsVisible',
          value
        })
      }
    },
    drawerMainColor: {
      get() {
        return this.$store.state.drawer.drawerMainColor
      },
      set(value) {
        this.$store.dispatch('changeSetting', {
          key: 'drawerMainColor',
          value
        })
      }
    },
    drawerLogoVisible: {
      get() {
        return this.$store.state.drawer.drawerLogoVisible
      },
      set(value) {
        this.$store.dispatch('changeSetting', {
          key: 'drawerLogoVisible',
          value
        })
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .el-card {
    font-size: 14px;
    border: 0;
  }
  .system-setting {
    padding-left: 0;
    list-style: none;
  }
  .system-setting li {
    border-bottom: 1px solid #f0f3f4;
    // padding: 11px 0;
    font-size: 13px;
    height: 45px;
    line-height: 45px;
  }
  .system-setting .flexSpeen {
    display: flex;
    justify-content: space-between;
  }
</style>
